<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="scss/quanju.css" />
		<link rel="stylesheet" href="css/details.css" />
		<style>
			.main-details-box {
		        float: left;
		        margin: 20px 0 50px;
		    }
			.main-details-box .main-details-l {
			    display: table-cell;
			    height: 472px;
			    padding-right: 40px;
			    vertical-align: middle;
			    width: 470px;
			}
			.main-details-l .main-img-box {
    overflow: hidden;
}
.main-img-box .little-img-box {
    float: left;
    overflow: hidden;
    width: 64px;
}
.main-img-box .little-img-box .prev, .main-img-box .little-img-box .next {
    display: block;
    height: 28px;
    width: 64px;
}
a {
    color: #666;
    outline: medium none;
    text-decoration: none;
}
.main-img-box .little-img-box .prev em, .main-img-box .little-img-box .next em {
    display: inline-block;
    height: 15px;
    margin: 7px 0 0 15px;
    width: 25px;
}
.main-img-box .little-img-box ul li em, .main-img-box .little-img-box .prev em, .main-img-box .little-img-box .next em, .detail-slide-box .arrow-box em, .package-prd-box .formula-right .prev em, .main-details-l .detail-share a em, .ensure-box span em, .main-details-r .ms-time .clock, .main-details-r .sale-infor .infor-box .more-infor span, .num-buy-box .num a, .num-buy-box .hand-buy em, .num-buy-box .phone-ewm em, .store-selector .text em, .store-selector .close, .store-selector .content .address-arrow, .package-prd-box .formula-right .next em, .user-pl-con .user-pl-li .pl-img, .user-pl-li .pl-con .pl-tit .pl-star em {
    background: rgba(0, 0, 0, 0) url(scss/img/xiangqing/detail_img.png) no-repeat scroll 0 0;
}
.main-img-box .little-img-box .prev em {
    background-position: -34px -100px;
}
.main-img-box .little-img-box .img-list-box {
    height: 350px;
    overflow: hidden;
}
.main-img-box .little-img-box ul li {
    border: 1px solid #fff;
    cursor: pointer;
    float: left;
    height: 56px;
    margin-bottom: 15px;
    position: relative;
    width: 56px;
}
.main-img-box .little-img-box ul li em {
    background-color: #fff;
    background-position: -10px -192px;
    display: none;
    height: 10px;
    position: absolute;
    right: -7px;
    top: 23px;
    width: 7px;
    z-index: 2;
}
.main-img-box .little-img-box ul li img {
    height: 56px;
    width: 56px;
}
.main-img-box .little-img-box .next em {
    background-position: -34px -129px;
}
.main-img-box .big-img-box {
    cursor: pointer;
    float: left;
    height: 400px;
    margin-left: 4px;
    overflow: hidden;
    position: relative;
    width: 400px;
}
.main-img-box .big-img-box img {
    height: 400px;
    width: 400px;
}
.main-details-l .detail-share {
    height: 16px;
    margin: 20px 100px 30px 0;
    position: relative;
}
.main-details-l .detail-share a {
    color: #333;
    display: inline-block;
    float: right;
    margin: 0 20px 0 0;
}
.main-details-l .detail-share .coll em {
    background-position: -71px -182px;
}
.main-details-l .detail-share a em {
    display: inline-block;
    height: 16px;
    margin-right: 4px;
    vertical-align: middle;
    width: 16px;
}
.main-details-l .detail-share a strong {
    color: #999;
    font-weight: normal;
    padding-left: 1px;
}
.main-details-l .detail-share .share em {
    background-position: -74px -156px;
    margin-top: -3px;
}
.main-details-box .main-details-r {
    display: table-cell;
    min-height: 472px;
    position: relative;
    width: 560px;
    z-index: 8;
}
.main-details-r .ad-tag-box {
    height: 30px;
}
.main-details-r .ad-tag-box .brand {
    display: inline-block;
    float: left;
    font-size: 18px;
    height: 29px;
    line-height: 40px;
    min-width: 83px;
}
.main-details-r .ad-tag-box .brand img {
    max-height: 29px;
    max-width: 83px;
}
.main-details-r .ad-tag-box .ad-tag {
    background: #666 none repeat scroll 0 0;
    color: #fff;
    float: right;
    height: 16px;
    line-height: 16px;
    margin: 10px 0 0 3px;
    padding: 2px 7px;
}
.main-details-r .ad-tag-box span {
    display: inline-block;
    float: left;
}
.main-details-r .prd-name {
    color: #333;
    font-size: 20px;
    font-weight: normal;
    line-height: 26px;
    margin: 15px 0 0;
}
.main-details-r .ad-hd-go {
    font-size: 14px;
    line-height: 20px;
    margin-top: 8px;
}
.main-details-r .ad-hd-go a {
    color: #ec3461;
    text-decoration: underline;
}
.main-details-r .ordinary-price {
    margin: 22px 0 15px;
    overflow: hidden;
    position: relative;
}
.main-details-r .ordinary-price .main-lm, .main-details-r .ms-price .main-lm {
    margin: 14px 0 0;
}
.main-details-r .main-lm {
    color: #999;
    display: inline-block;
    float: left;
    line-height: 18px;
    margin-right: 15px;
    text-align: justify;
    width: 60px;
}
.main-details-r .price {
    color: #333;
    font-size: 26px;
    margin: 0 15px 0 10px;
}
.main-details-r .mark-price {
    color: #666;
    margin-right: 50px;
}
.main-details-r .mark-price del {
    padding-left: 10px;
}
.main-details-r .pj-num {
    color: #666;
    cursor: pointer;
    display: inline-block;
}
.main-details-r .pj-num em {
    color: #333;
    padding: 0 5px;
}
.address-list {
    border-top: 1px solid #e3e3e3;
    height: 28px;
    padding-top: 27px;
}
.address-list .main-lm {
    float: left;
}
.main-details-r .main-lm {
    color: #999;
    display: inline-block;
    float: left;
    line-height: 18px;
    margin-right: 15px;
    text-align: justify;
    width: 60px;
}
.address-list .summary-stock {
    float: left;
    margin-top: 1px;
}
.summary-stock .trans {
    color: #666;
    float: left;
}
.store-selector {
    float: left;
    margin: -2px 10px 0;
    position: relative;
    z-index: 2;
}
.store-selector .text {
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    color: #333;
    height: 18px;
    line-height: 18px;
    padding: 0 20px 0 4px;
}
.store-selector .content {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e3e3e3;
    display: none;
    left: -48px;
    padding-bottom: 12px;
    position: absolute;
    top: 35px;
    width: 370px;
}
.store-selector .close {
    background-position: -67px -10px;
    cursor: pointer;
    height: 18px;
    position: absolute;
    right: 13px;
    top: 13px;
    width: 18px;
    z-index: 2;
}
.store-selector .content .address-arrow {
    background-color: #fff;
    background-position: -260px -47px;
    height: 8px;
    left: 95px;
    position: absolute;
    top: -7px;
    width: 23px;
}
.store-selector .content .usual-address {
    padding: 13px 13px 15px;
}
.address-list .address-say {
    color: #666;
    display: inline-block;
    float: left;
    margin: 2px 10px 0 0;
}
.after-service {
    color: #999;
    float: left;
    margin-bottom: 25px;
}
.main-details-r .main-lm {
    color: #999;
    display: inline-block;
    float: left;
    line-height: 18px;
    margin-right: 15px;
    text-align: justify;
    width: 60px;
}
.after-service span {
    color: #666;
    display: block;
    float: left;
    margin-top: 1px;
    width: 485px;
}
.size-box {
    float: left;
    margin-bottom: 5px;
}
.main-details-r .main-lm {
    color: #999;
    display: inline-block;
    float: left;
    line-height: 18px;
    margin-right: 15px;
    text-align: justify;
    width: 60px;
}
.size-box .size-con {
    float: left;
    width: 480px;
}
.size-box .size-con a.active {
    border: 1px solid #ec3461;
    color: #ec3461;
}
.size-box .size-con a {
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    color: #333;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 5px;
    padding: 0 5px;
}
.num-buy-box {
    float: left;
    height: 42px;
    margin-top: -4px;
    position: relative;
    width: 100%;
}
.num-buy-box .main-lm {
    margin: 18px 11px 0 0;
}
.main-details-r .main-lm {
    color: #999;
    display: inline-block;
    float: left;
    line-height: 18px;
    margin-right: 15px;
    text-align: justify;
    width: 60px;
}
.num-buy-box .num {
    display: inline-block;
    margin-top: 12px;
}
.num-buy-box .num .no-l {
    background-position: -257px -76px;
    cursor: default;
}
.num-buy-box .num .yes-l {
    background-position: -259px -114px;
}
.num-buy-box .num a {
    display: inline-block;
    height: 25px;
    vertical-align: middle;
    width: 25px;
}
.num-buy-box .num input {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 2px;
    color: #666;
    height: 26px;
    line-height: 26px;
    margin: 0 5px;
    text-align: center;
    vertical-align: middle;
    width: 42px;
}
.num-buy-box .num .yes-r {
    background-position: -214px -143px;
}
.num-buy-box .buy-now, .num-buy-box .buy-future {
    background-color: #ec3461;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 16px;
    height: 34px;
    line-height: 34px;
    margin: 0 5px 0 25px;
    text-align: center;
    width: 120px;
}
.num-buy-box .buy-cart {
    border: 1px solid #ec3461;
    border-radius: 3px;
    color: #ec3461;
    display: inline-block;
    font-size: 16px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    width: 118px;
}
.num-buy-box .hand-buy {
    color: #333;
    cursor: pointer;
    display: inline-block;
    margin-left: 7px;
    position: relative;
}
.num-buy-box .hand-buy em {
    background-position: -70px -76px;
    display: inline-block;
    height: 34px;
    vertical-align: text-bottom;
    width: 20px;
}
.num-buy-box .phone-ewm {
    background-color: #fff;
    border: 1px solid #e3e3e3;
    display: none;
    height: 85px;
    position: absolute;
    right: 8px;
    top: -75px;
    width: 85px;
}
.num-buy-box .hand-box:hover .phone-ewm{
	display: block;	
}
.num-buy-box .hand-buy:hover{
	color: red;
}
.ensure-box {
    float: left;
    line-height: 34px;
    margin: 24px 0 0 -4px;
    overflow: hidden;
    width: 100%;
}
.ensure-box span {
    display: inline-block;
    float: left;
    margin: 0 20px 10px 0;
}
.ensure-box .gfsq em {
    background-position: -207px -10px;
}
.ensure-box span em {
    display: inline-block;
    height: 34px;
    margin-right: 5px;
    vertical-align: middle;
    width: 34px;
}
.ensure-box .zpbz em {
    background-position: -107px -58px;
}
.ensure-box .sdfh em {
    background-position: -108px -105px;
}
.ensure-box .ltth em {
    background-position: -159px -105px;
}
.store-selector .text em {
    background-position: -72px -33px;
    height: 18px;
    position: absolute;
    right: 0;
    top: 0;
    width: 18px;
}

.detail-wrap .tit-wrap {
    border-top: 2px solid #e3e3e3;
    clear: both;
    margin: 0 auto;
    text-align: center;
    width: 1040px;
    
}


.detail-wrap .tit-wrap .tit-con {
    border-top: 2px solid #333;
    color: #333;
    display: inline-block;
    font-size: 18px;
    height: 60px;
    line-height: 60px;
    margin-top: -2px;
    padding: 0 20px;
}
.detail-wrap .tit-wrap .tit-con em {
    color: #999;
    font-size: 14px;
    padding-left: 10px;
    text-transform: uppercase;
}
		</style>
	</head>
	<body>
		<!--<div class="main-details-box" id="divproductbaseinfo" style=" width: 1080px;margin-left: 100px;border: 1px solid #ccc;">
            <div class="main-details-l">
                <div class="main-img-box">

                    <div class="little-img-box picScroll-top">
                        <a href="javascript:;" class="prev">
                        	<em></em>
                        </a>

                        <div class="img-list-box bd3">
                            <ul id="imagelist" style="top: 0px; position: relative; padding: 0px; margin: 0px;">

                                <li class="active" >
                                	<em></em>
                                	<img src="scss/img/xiangqing/29282-1_56x56.jpg" alt="" pic="">
                                </li>
                                <li class="">
                                	<em></em>
                                	<img src="scss/img/xiangqing/29282-2_56x56.jpg" alt="" pic="">
                                </li>
                               <li class="">
                                	<em></em>
                                	<img src="scss/img/xiangqing/29282-3_56x56.jpg" alt="" pic="">
                                </li>
                                <li class="">
                                	<em></em>
                                	<img src="scss/img/xiangqing/29282-4_56x56.jpg" alt="" pic="">
                                </li>
                                <li class="">
                                	<em></em>
                                	<img src="scss/img/xiangqing/29282-5_56x56.jpg" alt="" pic="">
                                </li>
                                <li class="">
                                	<em></em>
                                	<img src="scss/img/xiangqing/29282_56x56.jpg" alt="" pic="">
                                </li>
                            </ul>
                        </div>

                        <a href="javascript:;" class="next"><em></em></a>
                    </div>


                    <div class="big-img-box" id="selfzoompup">
                            <img src="scss/img/xiangqing/29282-3_400x400.jpg" alt="" id="bigimage" jqimg="">

                    </div>
                </div>
                <div class="detail-share">
	                <a href="javascript:;" class="coll">
	                	<em></em>
	                	收藏<strong>（157）</strong>
	                </a>
	
	                <a href="javascript:;" class="share sg_share_link">
	                	<em></em>分享
	                </a>
	            </div>
            </div>
            <div class="main-details-r">
                <div class="ad-tag-box">

                    <a href="" class="brand" target="_blank">
                    	<img src="scss/img/xiangqing/olay_170x60.jpg" alt="玉兰油" title="玉兰油">
                    </a>
                    <span class="ad-tag" title="天天网自营">自营</span>

                </div>
                <h2 class="prd-name">OLAY玉兰油水感透白亮肤面膜5片装</h2>
	              				
				<div id="sub-title" class="ad-hd-go">
					<a href="" target="_blank">【换季美白】选购指南，告别黑美人！全场2折起，底价来袭！速GO></a>
				</div>
				
				
                <div class="ordinary-price">
                    <div class="main-lm dynamic-name">价&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格:</div>
                    <span class="price"><em>￥</em><strong class="dynamic-price">129.00</strong></span>
                    <span class="mark-price">市场价:<del><em>￥</em>150.00</del></span>
                    <a href="#yhpl" class="pj-num">累计<em class="comment-count">544</em>人评价</a>                            
                </div>




               
                    <div class="address-list">
                        <div class="main-lm">运&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;费:</div>
                        <div class="summary-stock">
                            <div class="trans">配送至</div>
                            <div class="store-selector">                            
                                <div class="text">
                                    <span id="r-t">
                                            <span>北京市海淀区</span>
                                    </span>
                                    <em></em>
                                </div>                              
                            </div>
                        </div>
                        <div id="region-fee">
							<div class="address-say">免运费</div>
                        </div>

                    </div>

                    <div class="after-service">
                        <div class="main-lm">售后服务:</div>
                        <span>该商品由天天网提供；由天天网统一配送和提供售后服务</span>
                    </div>

                    <div class="size-box">
                    	<div class="main-lm">商品容量：</div>
                    	<div class="size-con">
                    		<a href="#" class="active" data-code="">5片</a>
                    	</div>
                    </div>


                    <div class="num-buy-box">
                        <div class="main-lm">数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;量:</div>
                        <span class="num">
                            <a href="javascript:;" class="less yes-l no-l" ></a>
                               <input type="text" value="1" id="buycount">
                            <a href="javascript:;" class="more yes-r" ></a>
                        </span>

                            <a href="#" class="buy-now">立即购买</a>
                            <a href="#" class="buy-cart">加入购物车</a>

                        <span class="hand-box">
                            <span class="hand-buy"><em></em>掌上购</span>
                            <span class="phone-ewm">
                            	<img src="scss/img/xiangqing/app_dow.gif" style="margin: 5px 5px;"/>
                            </span>
                        </span>
                    </div>
                	<div class="ensure-box">
                        <span class="gfsq"><em></em>官方授权</span>
                        <span class="zpbz"><em></em>正品保证</span>
                        <span class="sdfh"><em></em>闪电发货</span>
                        <span class="ltth"><em></em>60天退货</span>
                	</div>

            	</div>


        	
        </div> -->
       <div class="detail-wrap">
	       <div class="tit-wrap" >
				<span class="tit-con">
					热销爆品
					<em>hot</em>
				</span>
			</div>
		</div>
	</body>
</html>
